<template>
  <a-layout id="show">
    <!-- 侧边导航 -->
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div class="logo" />
      <a-menu
        theme="dark"
        mode="inline"
        v-model="slideBar.active"
        @select="slideSelect"
      >
        <a-menu-item
          class="slider"
          v-for="(item, index) in slideBar.list"
          :key="index | numToString"
        >
          <a-icon :type="item.icon" class="icon-font" />
          <span>{{ item.name }}</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)"
        />
      </a-layout-header>

      <a-layout-content
        :style="{
          margin: '24px 16px',
          padding: '24px',
          background: '#fff',
          minHeight: '280px',
        }"
      >
        <transition name="fade" mode="out-in">
          <router-view />
        </transition>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
import { mapState } from "vuex";
import common from "@u/mixins/common.js";
export default {
  //混入
  mixins: [common],
  data() {
    return {
      collapsed: false,
      slideBar: [],
      bran: [],
      loading: false,
    };
  },
  created() {
    // 初始化菜单
    this.slideBar = this.$layout.slideBar;
    // 获取面包屑导航
    this.getRouterBran();
    // 初始化选中菜单
    this.init_sliderBar();
  },
  watch: {
    $route(to, from) {
      // 本地存储
      localStorage.setItem(
        "sliderActive",
        JSON.stringify({
          left: this.slideBar.active[0] || "0",
        })
      );
      this.getRouterBran();
    },
  },
  computed: {
    ...mapState({
      user: (state) => state.user,
    }),
  },
  methods: {
    // 显示loading
    showLoading() {
      this.loading = true;
    },
    // 隐藏loading
    hideLoading() {
      this.loading = false;
    },
    // 初始化选中菜单
    init_sliderBar() {
      //有本地存储历史记录的话跳记录页面。
      let r = localStorage.getItem("sliderActive");
      if (r) {
        r = JSON.parse(r);
        this.slideBar.active[0] = r.left;
        // 拿到本地存储跳转到指定界面
        // 跳转到指定页面
        this.$router.push({
          name: this.slideBar.list[r.left].pathname,
        });
      } else {
        //无本地存储的跳首页。
        this.slideBar.active[0] = "0";
        this.$router.push({
          name: this.slideBar.list[0].pathname,
        });
      }
    },
    // 获取面包屑导航
    getRouterBran() {
      let b = this.$route.matched.filter((v) => v.name);
      let arr = [];
      b.forEach((v, k) => {
        // 过滤layout
        if (v.name === "layout") return;
        arr.push({
          name: v.name,
          path: v.path,
          title: v.meta.title,
        });
      });
      this.bran = arr;
    },
    // 左侧列表点击选择方法
    slideSelect(key, keyPath) {
      let index = parseInt(key.key);
      // 跳转到指定页面
      this.$router.push({
        name: this.slideBar.list[index].pathname,
      });
    },
  },
};
</script>
<style>
#show {
  height: 100vh;
}
#show .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#show .trigger:hover {
  color: #1890ff;
}

#show .logo {
  height: 44px;
  background: rgba(255, 255, 255, 0.2);
  margin: 10px 18px;
}
</style>